<template>
  <div>
    <!-- max-width:750px; 此宽度用于整体页面固定时-->
    <scroller v-show="!isWeChar" :lock-x="true" :lock-y="true" style="width:100%;height:46px;z-index:2;">
      <div class="order__head">
        <x-header>
          <div slot="default" class="common__header--title">我的订单</div>
          <div @click="goBack" slot="overwrite-left" class="common__header--img"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
        </x-header>
      </div>
    </scroller>
    <div class="order__title">
      <scroller lock-y :scrollbar-x="false">
        <div class="order__btn">
          <checker radio-required v-model="seleState" default-item-class="common__item" selected-item-class="common__item-selected common__bacolor--DefaultTheme">
            <checker-item class="grid-center" :value="item.key" v-for="(item, index) in items1" :key="index">{{item.value}}</checker-item>
          </checker>
        </div>
      </scroller>
    </div>
    <div id="order--list" class="order__list">
      <transition name="slide-fade">
        <!-- max-width:750px; 此宽度用于整体页面固定时-->
        <vue-scroller v-show="showAnimate" :style="scrollerStyle" v-if="!order.isFind" :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller">
          <div class="order--item" :style="getProStyle(index)" v-for="(order,index) in order.curShowOrder" :key="order.id" v-show="order.relState!='0'">
            <div class="order__date">{{order.createTime}}
              <span :style="stateColor(order.status)" class="order__date--state">{{order.status |orderState}}</span>
            </div>
            <div class="order__content">
              <span class="order__content--type" v-html="order.productName"></span>
              <span class="order__content--name">{{order.applicantName}}</span>
              <span class="order__content--price">￥{{order.amount}}</span>
            </div>
            <div class="order__date order__valid">
              保险有效期：{{order.startDate|dateFormat}} 至 {{order.endDate|dateFormat}}
            </div>
            <!-- <scroller lock-y :scrollbar-x="false"> -->
            <div class="order__btn policyList-item">
              <checker radio-required class="classroom__checker" default-item-class="order__item--default " selected-item-class="order__item-selectedmessage">
                <checker-item v-show="order.stateShow.policy && order.insurancePolicyStatus =='1'" class="grid-center order__item" @click.native="downPolicy(order)" value="1">电子保单</checker-item>
                <checker-item @click.native="queryEinv(order)" v-show="order.stateShow.invoice  && order.invoiceStatus =='1'" class="grid-center order__item" value="2">电子发票</checker-item>
                <checker-item @click.native="queryReIm(order)" v-show="order.stateShow.case" class="grid-center order__item" value="3">马上报案</checker-item>
                <checker-item v-show="order.stateShow.history" @click.native="showHistoryCase(order)" class="grid-center order__item" value="4">赔案查询</checker-item>
                <checker-item @click.native="pay(order)" v-show="order.stateShow.pay" class="grid-center order__item" style="padding: 2px 15px;" value="5">付款</checker-item>
                <!-- <checker-item @click.native="getClause(order)" v-show="order.stateShow.clause" class="grid-center order__item" value="6">条款下载</checker-item> -->
              </checker>
            </div>
            <!-- </scroller> -->
          </div>
        </vue-scroller>
      </transition>
    </div>

    <div class="order--item" v-if="order.isFind">
      <div class="order__date">{{order.findData.createTime}}
        <span :style="stateColor(order.status)" class="order__date--state">{{order.findData.status |orderState}}</span>
      </div>
      <div class="order__content">
        <span class="order__content--type">{{order.findData.productName}}</span>
        <span class="order__content--name">{{order.findData.applicantName}}</span>
        <span class="order__content--price">￥{{order.findData.amount}}</span>
      </div>
      <div class="order__date order__valid">
        保险有效期：{{order.findData.startDate|dateFormat}} 至 {{order.findData.endDate|dateFormat}}
      </div>
      <!-- <scroller lock-y :scrollbar-x="false"> -->
      <div class="order__btn policyList-item">
        <checker radio-required class="classroom__checker" default-item-class="order__item--default" selected-item-class="order__item-selectedmessage">
          <checker-item @click.native="downPolicy(order.findData)" v-show="order.findData.stateShow.policy && order.insurancePolicyStatus =='1'" class="grid-center order__item" value="1">电子保单</checker-item>
          <checker-item @click.native="queryEinv(order.findData)" v-show="order.findData.stateShow.invoice && order.invoiceStatus =='1'" class="grid-center order__item" value="2">电子发票</checker-item>
          <checker-item @click.native="queryReIm(order.findData)" v-show="order.findData.stateShow.case" class="grid-center order__item" value="3">马上报案</checker-item>
          <checker-item v-show="order.findData.stateShow.history" @click.native="showHistoryCase(order)" class="grid-center order__item" value="4">赔案查询</checker-item>
          <checker-item @click.native="pay(order.findData)" v-show="order.findData.stateShow.pay" class="grid-center order__item" style="padding: 4px 15px;" value="5">付款</checker-item>
          <!-- <checker-item @click.native="getClause(order.findData)" v-show="order.findData.stateShow.clause" class="grid-center order__item" value="6">条款下载</checker-item> -->
        </checker>
      </div>
      <!-- </scroller> -->
    </div>
    <pay-com></pay-com>

    <x-dialog v-model="order.showPolicyEmail" class="dialog-Einv" hide-on-blur>
      <send-Email></send-Email>
    </x-dialog>
    <!-- <x-dialog v-model="order.isShowReportIm" class="dialog-Einv" hide-on-blur>
                                                                                                                <report-immediately></report-immediately>
                                                                                                              </x-dialog> -->
  </div>
  </div>
</template>
<script>
import PayCom from "src/components/PayCom";
import SendEmail from "src/components/SendEmail";
import vueScroller from "src/common/vueScroller/components/Scroller";
import Config from "src/common/config/orderConfig";
import DateUtil from "src/common/util/dateUtil";
import { RequestUrl } from "src/common/url";
import { XHeader, XTable, Scroller, Cell, CellBox, CellFormPreview, Group, Badge, ButtonTab, ButtonTabItem, Divider, Checker, CheckerItem, XDialog, Alert, AlertPlugin, XButton, TransferDomDirective as TransferDom, XInput } from "vux";
import { mapState, mapActions } from "vuex";
import { Mutations, RouteUrl, SaveName } from "src/common/const";
export default {
  components: { PayCom, Scroller, XInput, Group, XDialog, Alert, AlertPlugin, XButton, TransferDom, vueScroller, XHeader, Cell, CellFormPreview, CellBox, Badge, ButtonTab, ButtonTabItem, Divider, XTable, Checker, CheckerItem, SendEmail },
  computed: mapState(["order", "user", "isWeChar"]),
  data() {
    return {
      msgTest: true,
      scrollerStyle: "position: fixed;padding-top: 90px;padding-bottom: 75px;z-index:0;",
      showEinv: false,
      results: [],
      value: "test",
      seleState: "",
      stateShow: {},
      items1: [
        {
          key: "all",
          value: "全部"
        },
        {
          key: "2",
          value: "待支付"
        },
        {
          key: "1",
          value: "有效 "
        },
        {
          key: "3",
          value: "失效"
        }
      ],
      orderState: [],
      seleOrder: {},
      showAnimate: true
    };
  },
  watch: {
    seleState(cur, old) {
      this.showAnimate = false;
      this.queryOrder("infinite");
      let _this = this;
      setTimeout(function () {
        _this.showAnimate = true;
      }, 100);
    }
  },
  filters: {
    dateFormat(value) {
      return value.split(' ')[0];
    },
    orderState(index) {
      return Config.getOrderState(index);
    }
  },
  methods: {
    stateColor(index) {
      let color = "#dedede"
      if (index < 4) {
        color = Config.getOrderStateTypeColor(index);
      }
      return "color:" + color + ";border: 1px solid " + color;
    },
    //马上报案
    queryReIm(order) {
      // let parm = {
      //   policyNo: order.policyNo,
      //   riskCode: order.riskCode
      // }
      // this.$common.storeCommit(this, Mutations.IS_SHOW_REPORT_IM, parm);
      // this.$common.goUrl(this, RouteUrl.REPORT_IMMEDIATELY);

      let enddate = DateUtil.getDateByStrYmdOrYmdhms(order.endDate).getTime();
      let startdate = DateUtil.getDateByStrYmdOrYmdhms(order.startDate).getTime();
      let nowData = new Date().getTime();
      if (enddate > nowData && startdate < nowData) {
        let parm = {
          policyNo: order.policyNo,
          riskCode: order.planRiskCode,
          type: 1,
          enddate: DateUtil.getDateStr_YmdByTs(enddate),
          startdate: DateUtil.getDateStr_YmdByTs(startdate)
        }
        this.$common.storeCommit(this, Mutations.IS_SHOW_REPORT_IM, parm);
        this.$common.goUrl(this, RouteUrl.REPORT_IMMEDIATELY);
      } else {
        this.$vux.alert.show({
          title: "提示",
          content: "该保单不在有效期限！"
        });
      }
    },
    //历史赔案
    showHistoryCase(order) {
      order.policyNo = order.policyNo;
      let data = { _this: this, order: order, type: "policyNo" }
      this.$common.storeCommit(this, Mutations.SHOW_HISTORY_CASE, data);

    },
    //继续支付
    pay(order) {
      let payData = {
        paymentNo: order.proposalNo,
        riskCode: order.planRiskCode,
        _this: this
      };
      this.$common.storeCommit(this, Mutations.PAY_SET_DATA, payData);
    },
    //下载电子保单
    downPolicy(order) {
      let email = "";
      if (this.user.isLogin && typeof (this.user.email) != "undefined") {
        email = this.user.email
      }

      let queryData = {
        TYPE: "FORM",
        policyNo: order.policyNo,
        proposalDate: order.createTime,
        emailStr: email,
        applicantName: order.applicantName,
        user: this.user,
        showPolicyEmail: true
      };
      this.$common.storeCommit(this, Mutations.SEND_POLICY_EMIAL, queryData);
    },
    //电子发票
    queryEinv(order) {
      let data = {
        _this: this,
        order: order
      };
      this.$common.storeCommit(this, Mutations.ORDER_QUERY_EINV, data);

    },
    getProStyle(value) {
      if (value % 2 == 0) {
        return "background-color:	#FAFAFA;";
      } else {
        return "background-color: #FFF;";
      }
    },
    goBack() {
      this.$common.goBack(this);
    },
    getClause(order) {
      this.$common.downloadfile(order.clauseUrl, "保险条款", this);
    },
    refresh(done) {
      let _this = this;
      $("#order--list").fadeOut();
      setTimeout(() => {
        _this.queryOrder("refresh", done);
        done();
      }, 500);
      $("#order--list").fadeIn();
    },
    infinite(done) {
      let _this = this;
      setTimeout(() => {
        _this.queryOrder("infinite", done);
        done(_this.order.isEnd);
      }, 500);
    },
    queryOrder(operation, done) {
      let state = this.seleState;
      if (state == "all") {
        state = "";
      }
      let queryData = {
        _this: this,
        operation: operation,
        seleState: state,
        done: done,
        user: this.user
      };
      this.isQuery = true;
      this.$common.storeCommit(this, Mutations.ORDER_OPERATION, queryData);
    }
  },
  beforeRouteEnter(to, from, next) {
    next();
  },
  beforeDestroy() {
    this.$common.storeCommit(this, Mutations.ORDER_SELE_STATE, this.seleState);
  },
  mounted() {
    document.title = '我的订单';
    if (sessionStorage[SaveName.IS_ORDER_FIND] == "F") {
      let findData = {
        isFind: false
      };
      this.$common.storeCommit(this, Mutations.SET_FIND_DATA, findData);
    }
    // this.$common.storeCommit(this, Mutations.IS_SHOW_VUE_SCROLLER_RE, true);
    this.seleState = this.order.orderSeleState;
    if (this.isWeChar) {
      this.scrollerStyle = "position: fixed;padding-top: 44px;padding-bottom: 75px;z-index:0;";
    }
    let queryData = {
      showPolicyEmail: false
    };
    this.$common.storeCommit(this, Mutations.SEND_POLICY_EMIAL, queryData);
    let _this = this;
    this.$init.subPageInit(this);
    this.$common.storeCommit(this, Mutations.VUE_SCROLLER_NO_MORE_DATA, "没有更多订单了");
    this.$common.storeCommit(this, Mutations.VUE_SCROLLER_BTN, 0);
    localStorage["IS_SHOP_DETAIL"] == "O";
  }
};
</script>

<style lang="scss">
.order__head {
  position: relative;
  width: 100%; // max-width: 750px;
  height: 46px; // background-color: #f95;
  z-index: 2; //auto：默认值。浏览器允许一些手势（touch）操作在设置了此属性的元素上，例如：对视口（viewport）平移、缩放等操作。
  //none：禁止触发默认的手势操作
  //pan-x：可以在父级元素(the nearest ancestor)内进行水平移动的手势操作。
  //pan-y：可以在父级元素内进行垂直移动的手势操作。
  //manipulation：允许手势水平/垂直平移或持续的缩放。任何auto属性支持的额外操作都不支持。
  //touch-action只支持具有CSS width和height属性的元素
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}

.order__title {
  position: relative;
  height: 35px; // max-width: 750px;
  padding: 0px 20px;
  padding-bottom: 10px;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fff;
  z-index: 2; //auto：默认值。浏览器允许一些手势（touch）操作在设置了此属性的元素上，例如：对视口（viewport）平移、缩放等操作。
  //none：禁止触发默认的手势操作
  //pan-x：可以在父级元素(the nearest ancestor)内进行水平移动的手势操作。
  //pan-y：可以在父级元素内进行垂直移动的手势操作。
  //manipulation：允许手势水平/垂直平移或持续的缩放。任何auto属性支持的额外操作都不支持。
  //touch-action只支持具有CSS width和height属性的元素
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  padding-left: 12px;
}

.policyList-item {
  width: 100% !important;
  text-align: right !important;
  padding-top: 0px !important;
}

.order__list {
  position: relative;
  width: 100%; // max-width: 750px;
  background-color: #003a7d;
}

.order__btn {
  padding: 0px 15px;
  padding-left: 0px;
  width: max-content;
  text-align: center;
  padding-top: 7px;
}

.vux-close {
  margin-top: 8px;
  margin-bottom: 8px;
}

.order__rable--content {
  font-size: 14px;
}

.order__rable--number {
  font-size: 14px;
  color: #003a7d;
}

.order__list_title {
  border: 1px solid #003a7d;
  font-size: 14px;
  color: #003a7d;
  padding: 3px 3px;
}

.classroom__checker {
  width: 100%;
}

.vux-table:after {
  border-top: 0px !important;
}

.order__serch {
  width: 100%;
  padding: 0px 4%;
  position: relative;
}

.order__serch--input {
  width: 70%;
  padding: 12px 2.5%;
  border: 0px;
  background: #f5f5f5;
  font-size: 12px;
}

input::-webkit-input-placeholder {
  color: #9c9c9c;
}

.order__serch--button {
  padding: 10.5px 4.6%;
  background: #f5f5f5;
  font-size: 14px;
  width: auto;
  color: #9c9c9c;
  height: 100%;
}

.order__itemmessage {
  font-size: 14px;
  padding: 5px 8px;
}

.order__item--default {
  border: 1px solid #003a7d;
  border-radius: 3px;
  color: #003a7d !important;
  margin-right: 5px;
  padding: 2px 4px;
  font-size: 13px;
}

.order__item-selectedmessage {
  background-color: #003a7d;
  font-size: 12px;
  color: #fff !important;
  border-radius: 3px;
  padding: 5px 8px;
}

td {
  width: 33.3%;
}

.order--item {
  padding: 12px;
  font-size: 14px;
  border-top: 1px solid #ededed;
  background-color: #fff; // padding-bottom: 0px;
}

.order__date--state {
  border: 1px solid #dedede;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 12px;
  float: right;
}

.order__date {
  color: #7a7a7a;
}

.order__content {
  font-size: 15px;
  padding: 5px 0;
}

.order__content--type {
  font-weight: bolder;
  margin-right: 4%;
}

.order__content--price {
  color: #003a7d;
  float: right;
}

.order__valid {
  font-size: 13px;
  padding-bottom: 2px;
}

.order__list--title {
  float: left;
  font-size: 15px;
  color: #003a7d;
  border-top: 1px solid #fff;
}

.order__iconspan {
  position: absolute;
  margin-top: 3px;
  width: 4px;
  height: 18px;
  background-color: #003a7d;
}

.order__iconspan--title {
  margin-left: 9px;
  font-size: 16px;
}

.order__Einv--title {
  border-top: 1px solid #fff;
  margin-left: -8px;
}

.order__formPolicy {
  border: 1px solid #e7e7e7;
  margin: 0 5px;
}

.order__formPolicy--group {
  padding: 0px 10px; // .vux-no-group-title {
  //     padding-bottom: 20px;
  // }
}

.order__input {
  font-size: 14px;
  color: #7f7f7f !important;
  .weui-cell__ft {
    text-align: justify;
    color: #999999;
  }
}

.dialog__Einv--div {
  margin-top: -7px;
}

// .dialog__Einv--btn {
//   float: right;
//   margin-right: 13px;
// }
.register_errorMsg {
  text-align: left;
  color: red;
  font-size: 14px;
  margin-left: 20px;
  margin-bottom: -20px;
  line-height: 40px;
}
</style>






